<template>
  <div id="box">
    <el-row>
      <el-col :span="22" :push="1">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部信息" name="first">
            <div class="grid-content bg-purple" style="height: 400px">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="title" label="通知标题" width="500">
                </el-table-column>
                <el-table-column prop="readFlag" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.readFlag == 0">未读</span>
                    <span v-if="scope.row.readFlag == 1">已读</span>
                  </template>
                </el-table-column>
                <el-table-column prop="noticeType" label="类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.noticeType == 0">系统信息</span>
                    <span v-if="scope.row.noticeType == 1">公司信息</span>
                    <span v-if="scope.row.noticeType == 2">产品信息</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间">
                </el-table-column>
              </el-table>
              <div class="grid-content bg-purple-dark">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="系统信息" name="second">
            <div class="grid-content bg-purple" style="height: 400px">
              <el-table :data="tableData1" border style="width: 100%">
                <el-table-column prop="title" label="通知标题" width="500">
                </el-table-column>
                <el-table-column prop="readFlag" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.readFlag == 0">未读</span>
                    <span v-if="scope.row.readFlag == 1">已读</span>
                  </template>
                </el-table-column>
                <el-table-column prop="noticeType" label="类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.noticeType == 0">系统信息</span>
                    <span v-if="scope.row.noticeType == 1">公司信息</span>
                    <span v-if="scope.row.noticeType == 2">产品信息</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间">
                </el-table-column>
              </el-table>
              <div class="grid-content bg-purple-dark">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="third">
            <div class="grid-content bg-purple" style="height: 400px">
              <el-table :data="tableData2" border style="width: 100%">
                <el-table-column prop="title" label="通知标题" width="500">
                </el-table-column>
                <el-table-column prop="readFlag" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.readFlag == 0">未读</span>
                    <span v-if="scope.row.readFlag == 1">已读</span>
                  </template>
                </el-table-column>
                <el-table-column prop="noticeType" label="类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.noticeType == 0">系统信息</span>
                    <span v-if="scope.row.noticeType == 1">公司信息</span>
                    <span v-if="scope.row.noticeType == 2">产品信息</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间">
                </el-table-column>
              </el-table>
              <div class="grid-content bg-purple-dark">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品信息" name="fourth">
            <div class="grid-content bg-purple" style="height: 400px">
              <el-table :data="tableData3" border style="width: 100%">
                <el-table-column prop="title" label="通知标题" width="500">
                </el-table-column>
                <el-table-column prop="readFlag" label="状态" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.readFlag == 0">未读</span>
                    <span v-if="scope.row.readFlag == 1">已读</span>
                  </template>
                </el-table-column>
                <el-table-column prop="noticeType" label="类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.noticeType == 0">系统信息</span>
                    <span v-if="scope.row.noticeType == 1">公司信息</span>
                    <span v-if="scope.row.noticeType == 2">产品信息</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间">
                </el-table-column>
              </el-table>
              <div class="grid-content bg-purple-dark">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
    
    <script>
import axios from "axios";
export default {
  data() {
    return {
      form: {},
      activeName: "first",
      pageNum: 1,
      pageSize: 5,
      total: 1,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
    };
  },
  created() {
    this.getNotice();
  },
  methods: {
    reset() {
      this.form = {};
    },
    getNotice() {
      //tableData
      axios.post("user/noctice/getNotice?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&type=3").then((res) => {
        console.log(res);
        this.tableData = res.data.data;
      });
      //tableData1
      axios.post("user/noctice/getNotice?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&type=0").then((res) => {
        console.log(res);
        this.tableData1 = res.data.data;
      });
      //tableData2
      axios.post("user/noctice/getNotice?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&type=1").then((res) => {
        console.log(res);
        this.tableData2 = res.data.data;
      });
      //tableData3
      axios.post("user/noctice/getNotice?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&type=2").then((res) => {
        console.log(res);
        this.tableData3 = res.data.data;
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRole();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getRole();
    },
    handleClick(tab, event) {
        console.log(tab, event);
    }
  },
};
</script>
    
    <style scoped>
/* element-ui样式 */
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #fff;
  border-radius: 10px;
}

/* 自定义样式 */
/* * {
      margin: 0px;
      padding: 0px;
    } */
.box {
  width: 98%;
  height: 100%;
  margin: auto;
  /* background-color: red; */
}
.block {
  padding-top: 20px;
  padding-left: 750px;
}
</style>